<template>
  <div class="detail">
    <div class="banner">
      <p>{{ $t('activity.makePopular') }}</p>
      <p>{{ $t('activity.onlyTen1') }}{{ $t('activity.onlyTen2') }}</p>
      <p>{{ $t('activity.limitNum') }}</p>
    </div>
    <div class="detail-cont">
      <p class="title">{{ $t('activity.influencerDetailIllu') }}</p>
      <p>{{ $t('activity.influencerDetailCont') }}</p>
      <p class="title">{{ $t('activity.influencerDetailJobTip') }}</p>
      <p>{{ $t('activity.influencerDetailJob1') }}</p>
      <p>{{ $t('activity.influencerDetailJob2') }}</p>
      <p>{{ $t('activity.influencerDetailJob3') }}</p>
      <p>{{ $t('activity.influencerDetailJob4') }}</p>
      <p>{{ $t('activity.influencerDetailJob5') }}</p>
      <p class="title">{{ $t('activity.influencerBenefitTip') }}</p>
      <p>{{ $t('activity.influencerBenefit1') }}</p>
      <p>{{ $t('activity.influencerBenefit2') }}</p>
      <p>{{ $t('activity.influencerBenefit3') }}</p>
      <p>{{ $t('activity.influencerBenefit4') }}</p>
      <p class="title">{{ $t('activity.influencerRulesTip') }}</p>
      <p>{{ $t('activity.influencerObject') }}</p>
      <p>{{ $t('activity.influencerNumber') }}</p>
      <p>{{ $t('activity.influencerConditions') }}</p>
      <p>{{ $t('activity.influencerConditions1') }}</p>
      <p>{{ $t('activity.influencerConditions2') }}</p>
      <p>{{ $t('activity.influencerConditions3') }}</p>
      <p>{{ $t('activity.influencerConditions4') }}</p>
      <p class="mt15">{{ $t('activity.influencerProcess') }}</p>
      <p>{{ $t('activity.influencerProcess1') }}</p>
      <p>{{ $t('activity.influencerProcess2') }}</p>
      <p>{{ $t('activity.influencerProcess3') }}</p>
      <p class="mt15">{{ $t('activity.influencerExit') }}</p>
      <p>{{ $t('activity.influencerExit1') }}</p>
      <p>{{ $t('activity.influencerExit2') }}</p>
      <p>{{ $t('activity.influencerExit3') }}</p>
      <p>{{ $t('activity.influencerExit4') }}</p>
      <el-button type="primary" class="btnPoster" @click="$router.push({name: 'influencerForm'})">{{ $t('activity.signUp') }}</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data() {
    return {
    }
  },
  components: {},
  props: {},
  watch: {},
  computed: {},
  created() {
    document.title = this.$t(`rout.${this.$route.meta.title}`);
  },
  mounted() {},
  beforeDestroy() {},
  methods: {},
}
</script>
<style lang="scss" scoped>
.detail{
  width: 1260px;
  margin: 0 auto;
  background: #fff;

  .banner {
    padding-top: 70px;
    height: 300px;
    background: url('../../../assets/img/activity/ambassador/banner.png') center center no-repeat;
    background-size: cover;
    color: #fff;
    text-align: center;

    p:nth-child(1) {
      font-size: 50px;
      font-weight: bold;
    }

    p:nth-child(2) {
      font-size: 26px;
      margin: 10px 0;
    }

    p:nth-child(3) {
      font-size: 16px;
    }
  }

  .detail-cont {
    padding: 30px 80px;

    .title {
      margin: 30px 0 5px;
      color: rgb(0, 108, 191);
      font-size: 16px;
    }
  }

  .btnPoster {
    display: block;
    width: 150px;
    margin: 20px auto 0;
  }
}
</style>
